<template>
  <div class="batch_import">
    <el-card class="box-card ">
      <div slot="header" class="clearfix">
        <span class="clearfixText"><i class="el-icon-s-order" />导入订单</span>
      </div>
      <div class="order_import_body">
        <div class="order_import_type">
          <div class="order_import">
            <div class="card_title">
              <span>导入订单</span>
            </div>
            <div class="import_btn">
              <span class="inline-block">
                <uploadExcel
                  :upload-type="'excel'"
                  :usage-name="'import-order'"
                  @handleSucces="handlesSucces"
                  @handleError="handlesError"
                />
              </span>
              <span class="inline-block">(请从本地导入excel文件)</span>
            </div>
            <div class="download_excel">请下载导入模板：<a download :href="domain + '/api/v1/common-file/download/opt/qiaoyi/common/order-import-template'">订单导入模板</a></div>
          </div>
          <div class="order_import">
            <div class="card_title">
              <span>导入并派单</span>
            </div>
            <div class="import_btn">
              <span class="inline-block">
                <uploadExcel
                  :upload-type="'excel'"
                  :usage-name="'importSend-order'"
                  @handleSucces="handlesSucces"
                  @handleError="handlesError"
                />
              </span>
              <span class="inline-block">(请从本地导入excel文件)</span>
            </div>
            <div class="download_excel">请下载导入模板：<a download :href="domain + '/api/v1/common-file/download/opt/qiaoyi/common/order-import-dispatch-template'">订单导入并派单模板</a></div>
          </div>
        </div>
        <div class="order_import_table">
          <div class="card_title">
            <span>导入列表</span>
          </div>
          <el-table
            :data="importData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="createdUserName"
              label="提交人"
            />
            <el-table-column
              prop="createdTime"
              label="提交时间"
            />
            <el-table-column
              label="结果"
            >
              <template slot-scope="{row}">
                {{ importStatus(row.status) }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template slot-scope="{row}">
                <a v-if="row.status === 'SUCCESS'" style="color:#1890ff;" :href=" `${domain}/api/v1/common-file/download/${row.sourceFileUrl}`" download>下载</a>
                <a v-else-if="row.status === 'FAILED'" style="color:#1890ff;" :href=" `${domain}/api/v1/common-file/download/${row.resultFileUrl}`" download>下载</a>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :current-page="pager.current"
              :page-sizes="pager.sizes"
              :page-size="pager.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pager.total"
              @size-change="changeTableSize"
              @current-change="changeTableCurrent"
            />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import uploadExcel from '@/components/Upload/index'
import { postImportOrderExcel, postImportLogSearch } from '@/api/tms/order'
export default {
  components: {
    uploadExcel
  },
  data() {
    return {
      domain: process.env.VUE_APP_TMS_IAM_HOST,
      // 创建订单表单
      formInline: {
        user: ''
      },
      // 弹窗表单
      dialogHistoryOrderForm: {
        user: ''
      },
      // 分页
      pager: {
        total: 0,
        sizes: [20, 50, 100],
        size: 20,
        current: 1
      },
      importData: [],
      dialogTableVisible: false
    }
  },
  computed: {
    importStatus: function() {
      return (val) => {
        if (val === 'PENDING') {
          return '正在生成Excel，完成即可下载'
        } else if (val === 'SUCCESS') {
          return '导入成功'
        } else if (val === 'FAILED') {
          return '导入失败'
        }
      }
    }
  },
  mounted() {
    this.getOrderLogList()
  },
  methods: {
    async handlesSucces({ url, usageName }) {
      if (usageName === 'import-order') {
        try {
          await postImportOrderExcel({ id: url, dispatch: false })
          this.$message.success('导入成功')
          this.getOrderLogList()
        } catch {
          return
        }
      } else {
        try {
          await postImportOrderExcel({ id: url, dispatch: true })
          this.$message.success('导入派单成功')
          this.getOrderLogList()
        } catch {
          return
        }
      }
    },
    async getOrderLogList() {
      const data = {
        types: ['ORDER', 'DISPATCH'],
        size: this.pager.size,
        current: this.pager.current
      }
      const { records, total } = await postImportLogSearch(data)
      this.importData = records
      this.pager.total = total
    },
    changeTableCurrent(val) {
      this.pager.current = val
      this.getOrderLogList()
    },
    changeTableSize(val) {
      this.pager.size = val
      this.pager.current = 1
      this.getOrderLogList()
    },
    handlesError() {

    },
    handleChange(val) {
      console.log(val)
    },
    selectHistoryOrder(row) {
      console.log(row)
    },
    dialogSelect() {

    }
  }
}

</script>

<style lang='scss'>
.batch_import {
  width: 100%;
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  // 卡片样式
  .box-card {
    .el-card__header {
      .clearfix {
        .clearfixText {
          padding-left: 10px;
          font-weight: 700;
          float: left;
          i{
            font-size: 25px;
            color: dodgerblue;
          }
        }
        button{
          float: right;
          margin-right: 10px;
        }
      }
    }
  }
  .order_import_body{
    .order_import_type{
      .order_import{
        width: 50%;
        display: inline-block;
        .import_btn{
          margin-top: 10px;
          .inline-block{
            display: inline-block;
            margin-left: 20px;
          }
        }
        .download_excel{
          margin-left: 20px;
          margin-top: 10px;
          a{
            text-decoration: underline;
            color: #1890ff;
            font-style: italic;
          }
        }
      }
    }
    .order_import_table{
      margin-top: 30px;
    }
  }
}
</style>

